/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: app/[locale]/about/page.tsx
 * Description: About page — mission, iterative eight-step approach, principles, and company vision
 */

import type { Metadata } from "next";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";
import { getMessages, isLocale, type Locale } from "@/lib/i18n";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  if (!isLocale(locale)) return {};
  const { meta } = getMessages(locale);
  return { title: { absolute: meta.about.title }, description: meta.about.description };
}

export default async function AboutPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { about } = getMessages(locale as Locale);

  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-20 sm:py-28">
          <SectionHeading as="h1" title={about.title} lead={about.lead} />
        </Container>
      </section>

      {/* Mission */}
      <section className="py-20 sm:py-24">
        <Container className="grid gap-10 lg:grid-cols-[1fr_2fr]">
          <h2 className="font-display text-2xl font-semibold tracking-tight text-accent">
            {about.missionTitle}
          </h2>
          <p className="text-lg leading-relaxed text-ink">{about.missionBody}</p>
        </Container>
      </section>

      {/* Approach — 8 steps */}
      <section className="border-t border-line bg-paper-2 py-20 sm:py-24">
        <Container>
          <SectionHeading title={about.approachTitle} lead={about.approachLead} />
          <ol className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {about.steps.map((step, index) => (
              <li
                key={step.title}
                className="rounded-2xl border border-line bg-card p-6"
              >
                <p className="font-mono text-sm text-accent">
                  {String(index + 1).padStart(2, "0")}
                </p>
                <h3 className="mt-3 text-base font-semibold text-ink">{step.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-ink-faint">{step.body}</p>
              </li>
            ))}
          </ol>
        </Container>
      </section>

      {/* Principles */}
      <section className="py-20 sm:py-24">
        <Container>
          <SectionHeading title={about.principlesTitle} lead={about.principlesLead} />
          <ul className="mt-12 grid gap-x-12 gap-y-10 sm:grid-cols-2">
            {about.principles.map((principle) => (
              <li key={principle.title} className="border-l-2 border-accent pl-6">
                <h3 className="font-display text-xl font-semibold text-ink">
                  {principle.title}
                </h3>
                <p className="mt-2 leading-relaxed text-ink-soft">{principle.body}</p>
              </li>
            ))}
          </ul>
        </Container>
      </section>

      {/* Vision */}
      <section className="border-t border-line bg-ink py-20 sm:py-24">
        <Container className="grid gap-10 lg:grid-cols-[1fr_2fr]">
          <h2 className="font-display text-2xl font-semibold tracking-tight text-paper">
            {about.visionTitle}
          </h2>
          <div className="space-y-5">
            <p className="text-lg leading-relaxed text-paper/80">{about.visionBody1}</p>
            <p className="text-lg leading-relaxed text-paper/80">{about.visionBody2}</p>
          </div>
        </Container>
      </section>
    </>
  );
}